<template>
<div>
    <div class="top" style="position: relative;" >
        <div :style="{background:data.bg}">
            <img :src="head_url"/>
            <div class="title" :style="{color:data.title_color,fontSize:data.title_size+'px'}">{{data.title}}</div>
        </div>
    </div>
    <div style="position: relative;">
        <!-- 导航栏开始 -->
		
        <div v-if="data.is_thumb == 1" class='di'>
            <img :src="data.thumb==''?head_thumb:data.thumb" :style="'width:100%;height:'+data.background_size+'px'">
        </div>
        <div v-else-if="data.is_thumb == 2" class='di'>
            <img :src="data.banner.length>0?data.banner[0].thumb:(data.thumb==''?head_thumb:data.thumb)" :style="'width:100%;height:'+data.background_size+'px'">
        </div>
		<div v-else class="di" :style="{background: 'linear-gradient(to left, '+data.background[1]+','+data.background[0]+')',height:data.background_size+'px'}">
		</div>
        <!-- 导航栏结束 -->
    </div>
    </div>
</template>

<script>
    export default {
        props:['data'],
        name: 'ItemHead',
        data(){
            return{
                head_url:require("@/image/model/nav.png"),//图片地址
                head_thumb:require("@/image/model/banner.jpg"),//图片地址
            }
        },
    }
</script>

<style >
.top{
    width: 100%;
    height: 55px;
}
.top img{
    width: 100%;
    height: 55px;
}
.title{
    position: absolute;
    left: 49%;
    transform: translateX(-50%);
    top: 25px;
}
   .di {
       width: 100%;
       position: absolute;
       top: 0;
       left: 0;
       z-index: 0;
        
   }
</style>
